<template> 
  <el-container>
    <!-- header -->
    <el-header>
      <div class="heade"> 
          <div class="diet-date">
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="今天"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="handleDateChange">
          </el-date-picker>
          </div>
          <div class="diet-title">
        <h1>饮食</h1> 
      </div>  
      </div>  
    </el-header>

    <el-container>
      <el-aside width="200px">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" >
              <el-button type="info" id="BREAKFAST" @click.native="handleClick($event)" icon="el-icon-edit" style="font-size: 18px" plain>添加早餐</el-button> 
            </div>
          </el-col>
          <el-col :span="24">
            <div class="grid-content bg-purple-light">
              <el-button type="info" id="LUNCH" @click.native="handleClick($event)" icon="el-icon-edit" style="font-size: 18px">添加中餐</el-button> 
            </div>
          </el-col>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-button type="info" id="SUPPER" @click.native="handleClick($event)" icon="el-icon-edit" style="font-size: 18px" plain>添加晚餐</el-button> 
            </div>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
      <!-- side -->
      <el-main>
      <!-- 早餐 -->
        <div class="total-border">    
          <div class="content-title"> 
            <div class="diet-item ">
            <h2>早餐</h2> 
            </div>  
            <div class="diet-item ">
              <h2>总计热量：{{breakfastSum}}kcal</h2> 
            </div> 
          </div>
          <div class="list-item">
            <el-table
              :show-header="false"
              :data="breakfast"
              height="140"
              border
              style="width: 100%;font-size:15px">
              <el-table-column
                label="食物名称"
                show-header="false"
                style="width: 25%;font-size:15px">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>食物名称: {{ scope.row.dietInfoPO.name }}</p>
                    <p>份量: {{ scope.row.dietRecordPO.amount }}{{scope.row.dietInfoPO.unit}}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.dietInfoPO.name }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                label="份量"
                style="width: 25%">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.dietRecordPO.amount }}{{scope.row.dietInfoPO.unit}}</span>
                </template>
              </el-table-column>
              <el-table-column 
                label="热量"
                style="width: 25%">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.dietRecordPO.energy }}kcal</span>
                </template>
              </el-table-column>
              <el-table-column label="操作"  style="width: 25%">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, breakfast,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>        
        </div>  
      <!-- 中餐 -->
        <div class="total-border">    
          <div class="content-title"> 
            <div class="diet-item ">
              <h2>中餐</h2> 
            </div>  
            <div class="diet-item ">
              <h2>总计热量：{{lunchSum}}kcal</h2> 
            </div> 
          </div>
          <div class="list-item">
            <el-table
              :show-header="false"
              :data="lunch"
              height="140"
              border
              style="width: 100%;font-size:15px">
                <el-table-column
                  label="食物名称"
                  style="width: 25%;font-size:15px">
                  <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                      <p>食物名称: {{ scope.row.dietInfoPO.name }}</p>
                      <p>份量: {{ scope.row.dietRecordPO.amount }}{{scope.row.dietInfoPO.unit}}</p>
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.dietInfoPO.name }}</el-tag>
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column
                  label="份量"
                  style="width: 25%">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.dietRecordPO.amount }}{{scope.row.dietInfoPO.unit}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="热量"
                  style="width: 25%">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.dietRecordPO.energy }}kcal</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作"  style="width: 25%">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, lunch,scope.row)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>      
        </div>  
      <!-- 晚餐 -->
        <div class="total-border">    
          <div class="content-title"> 
            <div class="diet-item ">
              <h2>晚餐</h2> 
            </div>  
            <div class="diet-item ">
              <h2>总计热量：{{supperSum}}kcal</h2> 
            </div> 
          </div>
          <div class="list-item">
            <el-table
              :show-header="false"
              :data="supper"
              height="140"
              border
              style="width: 100%;font-size:15px">
                <el-table-column
                  label="食物名称"
                  style="width: 25%;font-size:15px">
                  <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                      <p>食物名称: {{ scope.row.dietInfoPO.name }}</p>
                      <p>份量: {{ scope.row.dietRecordPO.amount }}{{scope.row.dietInfoPO.unit}}</p>
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.dietInfoPO.name }}</el-tag>
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column
                  label="份量"
                  style="width: 25%">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.dietRecordPO.amount }}{{scope.row.dietInfoPO.unit}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="热量"
                  style="width: 25%">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.dietRecordPO.energy }}kcal</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作"  style="width: 25%">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index,supper,scope.row)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>      
        </div> 
      </el-main>
     
    </el-container>
  </el-container>
</el-container>
</template> 
<script>
import { get, delet } from "../ajax";
import { MessageBox } from "element-ui";

export default {
  name: "Diet",
  data() {
    return {
      date: "", //日期
      userId:1,
      breakfast:[], //早餐
      breakfastSum:0, //早餐总热量
      lunch:[],
      lunchSum:0,
      supper:[],
      supperSum:0,
    };
  },
  created() {},
  async mounted() {
    //获取当前日期
    if(this.$route.query.date){
      this.date=this.$route.query.date;
    }else{
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.date = year + seperator1 + month + seperator1 + strDate;
    }

    console.log(this.date);

    const res = await get("/SmartMachine/api/Diet/records", {
      body: {
        userId: this.userId,//从智能一体机传userId
        date: this.date,

      }
    });

    res.data.forEach(item => {
      if (item.dietRecordPO.type === "BREAKFAST") {
        this.breakfast.push(item);
        this.breakfastSum += item.dietRecordPO.energy;
      }
      if (item.dietRecordPO.type === "LUNCH") {
        this.lunch.push(item);
        this.lunchSum += item.dietRecordPO.energy;
      }
      if (item.dietRecordPO.type === "SUPPER") {
        this.supper.push(item);
        this.supperSum += item.dietRecordPO.energy;
      }
    });
  },
  methods: {
    async handleDateChange(value) {
      console.log(value);
      console.log(this.date);
      const res = await get("/SmartMachine/api/Diet/records", {
        body: {
          userId: 1,
          date: value
        }
      });
      this.breakfast = []; //早餐
      this.breakfastSum = 0; //早餐总热量
      this.lunch = [];
      this.lunchSum = 0;
      this.supper = [];
      this.supperSum = 0;
      res.data.forEach(item => {
        if (item.dietRecordPO.type === "BREAKFAST") {
          this.breakfast.push(item);
          this.breakfastSum += item.dietRecordPO.energy;
        }
        if (item.dietRecordPO.type === "LUNCH") {
          this.lunch.push(item);
          this.lunchSum += item.dietRecordPO.energy;
        }
        if (item.dietRecordPO.type === "SUPPER") {
          this.supper.push(item);
          this.supperSum += item.dietRecordPO.energy;
        }
      });
    },
    handleEdit(index, row) {
      console.log(row.dietRecordPO.id);
      // this.$router.push("/changeDiet",{
      //   query:{
      //     recordId:row.dietRecordPO.id,
      //   }
      // });
      this.$router.push({
        path: "/changeDiet",
        query:{
          recordId:row.dietRecordPO.id,
        }
      })
    },
    async handleDelete(index, rows, row) {
      console.log(row)
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        //type: 'warning'
      }).then(async () => {
        //confirm
        const recordId = row.dietRecordPO.id;
        const res = await delet("/SmartMachine/api/Diet/records", {
          body: {
            id: recordId
          }
        });
        console.log(res);
        if (res.error == 0) {
          console.log("in delete");
          rows.splice(index, 1);
          if (row.dietRecordPO.type === "BREAKFAST") {
            this.breakfastSum -= row.dietRecordPO.energy;
          }
          if (row.dietRecordPO.type === "LUNCH") {
            this.lunchSum -= row.dietRecordPO.energy;
          }
          if (row.dietRecordPO.type === "SUPPER") {
            this.supperSum -= row.dietRecordPO.energy;
          }
          MessageBox.alert(`删除成功`, "饮食记录管理", {
            confirmButtonText: "好的"
          });
        }
      }).catch(() => {
        //cancle
       
      });

    },
    handleClick(event) {
      // this.$router.push("/dietList");
      //console.log(event.currentTarget.id);
      this.$router.push({
        path: "/dietList",
        query:{
          userId:this.userId,
          type:event.currentTarget.id,
          date:this.date,
        }
      })
    }
  }
};
</script> 
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 90px;
}
.el-aside {
  color: #333;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
.heade {
  display: flex;
  border-radius: 15px;
}
.diet-date {
  flex: 0 0 20%;
  margin-top: 10px;
  line-height: 15px;
  font-size: 20px;
}
.diet-title {
  flex: 0 0 30%;
  margin-top: 14px;
  margin-left: 20%;
  font-size: 15px;
  line-height: 2px;
}
.diet-item {
  flex: 0 0 30%;
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid #ccc;
  font-size: 10px;
  border-radius: 15px;
  line-height: 7px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin: 10px;
  border-radius: 4px;
  min-height: 36px;
}
.content-title {
  display: flex;
  margin-left: 1px;
  margin-bottom: 20px;
  border-radius: 15px;
}
.list-item {
  margin: 8px;
}
.total-border {
  /* background-color: #d3dce6; */
  width: 100%;
  height: 32%;
  border: 1px solid #ccc;
  margin: 5px;
  margin-top: 2px;
}
</style> 


